<template>
    <div class="app-container calendar-list-container">
        <!--<div class="filter-container justify-between">-->
            <!--<div>-->
                <!--<el-switch v-model="multi" inactive-text="批量操作"></el-switch>-->
                <!--<template v-if="multi">-->
                    <!--<el-button size="mini" type="danger" @click="doRemove('','确定要删除吗？')">删除</el-button>-->
                <!--</template>-->
            <!--</div>-->
            <!--<div>-->
              <!--<el-select @change='doSearch' style="width: 140px" class="filter-item" v-model="listQuery.msg_type"-->
                         <!--placeholder="全部消息">-->
                <!--<el-option v-for="(item,index) in msgTypeList" :key="item.data_value" :label="item.data_text"-->
                           <!--:value="item.data_value"></el-option>-->
              <!--</el-select>-->
            <!--</div>-->
        <!--</div>-->

        <el-table  ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
                    fit  style="width: 100%"  @selection-change="onSelectionChange"  height="500">
            <el-table-column v-if='multi' type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column align="left" label="消息内容" width="760">
                <template slot-scope="scope">
                    <span>{{scope.row.message}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                </template>
            </el-table-column>
            <el-table-column align="left" label="时间">
              <template slot-scope="scope">
                <span>{{scope.row.create_time|beautiful_time}}</span>
              </template>
            </el-table-column>

        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange"
                           :current-page="listQuery.page" :page-sizes="[12,50,100,10000]" :page-size="listQuery.limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>


    </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import _ from 'underscore'
  import {mapGetters} from 'vuex'
	import Qiniu from '@/utils/qiniu'

	export default {
		directives: {waves},
		data() {
			return {
				dealing: false,
				multi: false,
				list: [],
				total: 0,
				listLoading: true,
				listQuery: {
          pageNumber: 1,
          pageSize: 12,
					keyword: '',
					status: ''
				},
				bean: {},
				multipleSelection: [],
        msgTypeList: [{data_value: 'all', data_text: '全部消息'}].concat(Store.getters.basedata.company_msg),

			}
		},
		filters: {},

		components: {},
		created() {
			this.loadList()
		},
		computed: {
      ...mapGetters([
        'msgTips'
      ]),
		},
		methods: {
			loadList() {
				this.listLoading = true
				Http.getModel(API.get_admin_message_list, this.listQuery, false).then((json) => {
					this.loading = false
					if (json.code == 0) {
						this.list = json.data.list
						this.total = parseInt(json.data.total)
						this.listLoading = false
            this.setReaded()
					}
				})
			},
      setReaded(){
        Http.getModel(API.set_admin_message_readed,{}, false).then((json) => {
          this.msgTips.msg_amount = 0
        })
      },
			doRemove(ids, tips) {
				if (!ids) {
					if (this.multipleSelection.length == 0) {
						Msg.error("请先选择");
						return false;
					} else {
						ids = _.pluck(this.multipleSelection, "id").join(",");
					}
				}
				Msg.confirm(tips, () => {
					Http.getModel(API.remove_message, {ids: ids}, false).then((json) => {
						if (json.code == 0) {
							Msg.success(json.msg, () => {
								this.loadList()
							})
						} else {
							Msg.error(json.msg)
						}
					})
				})
			},
			doOperate(ids, cmd, tips) {
				var status = 0;
				var url = "";
				switch (cmd) {
					case 'disable':
						status = 2;
						url = API.disable_panel;
						break;
					case 'enable':
						status = 1;
						url = API.enable_panel;
						break;
					default:
						break;
				}
				if (status == 1 || status == 2) {
					if (!ids) {
						if (this.multipleSelection.length == 0) {
							Msg.error("请先选择");
							return false;
						} else {
							ids = _.pluck(this.multipleSelection, "id").join(",");
						}
					}
					Msg.confirm(tips, () => {
						Http.getModel(url, {ids: ids, status: status}, false).then((json) => {
							if (json.code == 0) {
								Msg.success(json.msg, () => {
									this.loadList()
								})
							} else {
								Msg.error(json.msg)
							}
						})
					})
				}
			},
			onUploadImg(obj) {
				new Qiniu().upload(obj.file, (url) => {
					this.bean.img=url
				})
			},
			beforeAvatarUpload(file) {
			},
			/***   公用部分 start ***/
			onSelectionChange(val) {
				this.multipleSelection = val;
			},
			doSearch() {
				this.listQuery.page = 1
				this.loadList()
			},
			onSizeChange(val) {
				this.listQuery.limit = val
				this.loadList()
			},
			onCurrentChange(val) {
				this.listQuery.page = val
				this.loadList()
			},
			/***   公用部分 end ***/
		}
	}
</script>
<style>
    .img-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .img-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .img-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .img {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
